<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/element.css">
    <link rel="stylesheet" href="/editor/css/style.css" />
    <link rel="stylesheet" href="/editor/css/editormd.css" />
    <script src="/editor/js/jquery.min.js"></script>
    <script src="/editor/js/editormd.min.js"></script>
    <#include "/include/commonjs.html">
    <title>内容新建</title>
</head>
<body>
<div id="app">
    <#include "/include/daohang.html">
    <div>
        <div style="padding: 20px">
            <div>
                <div>
                    <el-form :model="form"  label-width="60px" class="demo-ruleForm" :rules="rules" ref="form">
                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="标题: " prop="title">
                                    <el-input placeholder="请输入标题" size="small" v-model="form.title" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="primary" @click="submitFrom('form')">提交</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="10">
                                <el-form-item label="标签: " prop="tags" >
                                    <el-input placeholder="请输入标签" size="small" v-model="form.tags"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item label="栏目: " prop="channelId" >
                                    <el-cascader
                                            size="small"
                                            v-model="form.channelId"
                                            :options="data"
                                            :props="props"
                                            style="width: 100%"
                                            :clearable="true"
                                            @change="handleChange_channel">
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-button-group style="display: inline">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="addrowone" >添加一行数据</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-share"></el-button>
                    <el-button type="primary" size="mini" icon="el-icon-delete"></el-button>
                </el-button-group>
                <div>
                    <el-table
                            size="small"
                            border
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <#list list as item>
                        ${item}
                    </#list>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var testEditor;

    var Main = {
        extends: global,
        data() {
            return{
                model:${model.modelJson},
                list:[],
                tableData:[],
                activeIndex: '2',
                activeIndex2: '2',
                form:{
                    channelId:${channelId},
                },
                formLabelWidth:'120px',
                restaurants: [],
                state: '',
                select: '',
                data: [],
                props:{
                    children: 'childs',
                    label: 'channelname',
                    value:'id',
                    checkStrictly:true,
                    emitPath:false
                },
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    tags: [
                        {required: true, message: '请输入标签', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    channelId:[
                        {required: true, message: '请选择栏目id', trigger: 'blur'},
                    ],
                }
            }
        },
        created(){
            this.getChannel()
        },
        methods: {
            savedata(){

            },
            addrowone(){
              let data=this.getform();
              this.tableData.push(data);
            },
            getform(){
                let data={
                    uuid:api.getuuid(),
                    ${defaultvalue}
                };
                return data;
            },
            getChannel(){
                api.GET('/channel/getprichannelbind',null,(res)=>{
                    if(res.code===0){
                        this.data=res.data;
                    }
                })
            },
            handleChange_channel(val){
                this.form.channelId=val;
            },
            submitFrom(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //获取富文本
                        console.log(this.model)
                        console.log(JSON.stringify(this.tableData))
                        var data={'title':this.form.title,'tag':this.form.tags,'channelId':this.form.channelId,'isPrivate':true,'model':this.model,'array':this.tableData};
                        api.POST('/note/save',data,(result)=>{
                            if (result.code==0){
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                window.location.href="/update?id="+result.data
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>
</body>
</html>